<template>
  <div>
      <el-main>
      <!---->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick()">
          <el-tab-pane label="全部商品" name="first">

            <el-row style="border: 1px solid red">

              <el-col :span="3" :offset="3">电影图片</el-col>
              <!--              电影名-->
              <el-col :span="3">电影名</el-col>
              <!--              电影开始时间-->
              <el-col :span="3">放映时间及座位号</el-col>
              <!--              电影单价-->
              <el-col :span="3" :offset="1">单价</el-col>
              <!--              电影张数-->
              <el-col :span="3">数量</el-col>
              <!--              操作按钮-->
              <el-col :span="4" :offset="1">操作</el-col>
            </el-row>

            <el-row class="mains" v-for="(cartd,i) in cartds" :key="i">

<!--              电影图片-->
                  <el-col :span="3" :offset="2">
                    <img :src="cartd.nfImg " class="image">
                  </el-col>
<!--              电影名-->
                  <el-col class="t" :span="2" :offset="1">《{{cartd.nfName}}》</el-col>
<!--              电影开始时间-->
                  <el-col class="t" :span="4" :offset="1">{{cartd.sDay}}号{{cartd.sHour}}点&nbsp;{{cartd.sPlayHall}}厅 {{cartd.cSeat}}</el-col>
<!--              电影单价-->
                  <el-col class="t" :span="2">￥{{cartd.nfPrice}}</el-col>
<!--              电影张数-->
                  <el-col class="t" :span="2"  :offset="1">{{cartd.cNum}}</el-col>
<!--              操作按钮-->
                  <el-col class="t" :span="4" :offset="1" ><el-button @click="deletecartfilm(cartd.cId)">删除</el-button>&nbsp;<el-button @click="buyit(cartd)">结算</el-button></el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
<!--        总价以及总价结算-->
            <el-row>
            </el-row>
      </el-main>
  </div>
</template>

<script>
  import Qs from "qs"
    export default {
      name: "index",
      /*data(){
      return {
          activeName:'first',
          cartds:[
             {
              nfilm:{nfId:10,nfImg:'',nfName:'噩梦',nfPrice: 50},
              sho:{sDay: 20, sHour: 17, sHall: 1},
              cart:{cNum: 2}
             }],
          uid:JSON.parse(sessionStorage.getItem("userinfo")).uid
       }
      } ,*/
      data(){
         return {
           activeName:'first',
           cartds:[{nfId:10,nfImg:'',nfName:'噩梦',nfPrice: 50, sDay: 20, sHour: 17, sPlayHall: 1, cNum: 2,cId:2,cSeat:''},
             {nfId:11,nfImg:'',nfName:'噩梦',nfPrice: 50, sDay: 20, sHour: 17, sPlayHall: 1, cNum: 2,cId:2,cSeat:''},
           ],
          uid:'',
         }
      } ,
      methods:{
        buyit(cartd){
          console.log(cartd)
            this.$router.push({name:'tocommintordercart',params:{'cartd':cartd}})
        } ,
        handleClick(){
          var vm =this
           this.axios({
             //uid:JSON.parse(sessionStorage.getItem("userinfo")).uid,

            // url:'http://localhost:80/api/cart/qurycart/'+uid,
             url:'http://localhost:80/api/cart/qurycart/1'
           }).then(function (res) {
               if(res.data.success){
                 vm.cartds=res.data.data
                 console.log(res.data.data)
               }
           })
        },
        deletecartfilm(cid){
          var vm = this
          this.$confirm('是否删除该购物车信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios({
              url:'http://localhost:80/api/cart/remove/'+cid,

            }) .then(function (res) {
              if(res.data.success){
                vm.$message({
                  message: '删除成功',
                  type: 'success',
                });
                vm.handleClick();
                vm.$router.push({name:'filmcart'})
              }else{
                vm.$message({
                  message: '删除失败',
                  type: 'warning'
                });
              }
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      } ,
      //删除购物车信息    后端未测试


      //支付订单    没有url

      created() {
         this.handleClick()
      }
    }
</script>

<style scoped>
  .image{
    width: 150px;
    height: 150px;
  }
  .mains{
    margin-top: 20px;
  }
  .t{
    margin-top: 50px;
  }
  .mid{
    position: absolute;
    margin:55px 50px;

  }
</style>
